<!-- MsgSlider.nvue -->
<template>
  <view class="main-borad" @touchstart="start" @touchmove="move" @touchend="end">
    <view class="swiper-up">
      <view 
        class="item-container" 
        v-for="(up, index) in uplist" 
        :key="index"
 
      >
	  <view class="item-nicpic-box"><image class="item-nicpic" :src="up.nicPic" mode="aspectFill"></image></view>
    
      </view>
    </view>

    <view class="swiper-mid">
		<view class="" > <image class="picmid" :src="datalist[indexNow].nicPic" mode="aspectFill"></image></view>
  
    </view>

    <view class="swiper-down">
      <view 
        class="item-container" 
        v-for="(down, index) in downlist" 
        :key="index"
 
      >
<view class="item-nicpic-box"><image class="item-nicpic" :src="down.nicPic" mode="aspectFill"></image></view>
    
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'MsgSlider',
  props: {
    listData: {
      type: Array,
      default: () => []
    },
    initialIndex: {
      type: Number,
      default: 0
    },
    fadeRange: {
      type: Number,
      default: 3 // 控制渐隐的范围（距离当前项多远开始完全透明）
    }
  },
  data() {
    return {
      indexNow: this.initialIndex,
      startcount: 0,
      moveDistance: 0,
      isMoving: false
    };
  },
  computed: {
    datalist() {
      return this.listData;
    },

uplist() {

  const start = Math.max(0, this.indexNow - 3);

  return this.datalist.slice(start, this.indexNow)
},

downlist() {

  const end = Math.min(this.datalist.length, this.indexNow + 4);

  return this.datalist.slice(this.indexNow + 1, end);
}
  },
  watch:{
	indexNow:{
		handler(newval){
		uni.$emit('callout',this.datalist[newval]) 
			
		}
	}  
  },
  methods: {

    
    start(e) {
	  uni.vibrateShort({
	  	success() {
	  		
	  	}
	  })	
      this.startcount = e.touches[0].screenY;
      this.isMoving = true;
      this.moveDistance = 0;
    },
    
    move(e) {
      if (!this.isMoving) return;
      
      const currentY = e.touches[0].screenY;
      this.moveDistance = currentY - this.startcount;
    },
    
    end(e) {
      this.isMoving = false;
      
      const end = e.changedTouches[0].screenY;
      const diff = this.startcount - end;
      
      // 边界检查
      if (diff > 30 && this.indexNow < this.datalist.length - 1) {
        this.indexNow++;
        this.$emit('change', this.indexNow);
      } else if (diff < -30 && this.indexNow > 0) {
        this.indexNow--;
        this.$emit('change', this.indexNow);
      }
      
      this.startcount = 0;
      this.moveDistance = 0;
    }
  }
};
</script>

<style>
.main-borad {
  position: fixed;
  left: 20rpx;
  bottom: 500rpx;
  background-color: rgba(0, 0, 0, 0.3);
  height: 500rpx;
  width: 100rpx;
  border-radius: 50rpx;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.swiper-up {
  display: flex;
  justify-content: flex-end;
  width: 100rpx;
  height: 200rpx;
  padding-top: 10rpx;
  padding-bottom: 10rpx;
}

.swiper-mid {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100rpx;
  height: 80rpx;
  background-color: rgba(255, 255, 255, 0.1);
  border-top: 1rpx solid rgba(255, 255, 255, 0.3);
  border-bottom: 1rpx solid rgba(255, 255, 255, 0.3);
}
.picmid{
	width: 80rpx;
	background-color: white;
	height: 80rpx;
	border-radius: 10rpx;
}
.swiper-down {
  display: flex;
  width: 100rpx;
  height: 200rpx;
  padding-top: 10rpx;
}

.item-container {
  width: 100rpx;
  height: 50rpx;

  margin-top: 5rpx;
  margin-bottom: 5rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}

.item-nicpic{
	width: 50rpx;
	height: 50rpx;
	border-radius: 25rpx;
}
.item-nicpic-box{
	background-color: white;
	width: 50rpx;
	height: 50rpx;
	border-radius: 25rpx;

}


</style>